@layer base {
    [data-webtui-theme='terminaldotshop'] {
        --background: #000000;
        --border: #3a3f42;
        --accent: #ffffff;
        --body: #889096;

        --brand: #ff5c00;
        --cron: #00fdff;
        --artisan: #ff5f5f;
        --object-object: #ffaf00;
        --segfault: #00afaf;
        --dark-mode: #00875f;
        --404: #d75f87;

        --background0: #000000;
        --background1: #151719;
        --background2: #191c1e;
        --background3: #222628;
        --foreground0: #ffffff;
        --foreground1: #a7acb3;
        --foreground2: #737a82;
    }
}

@layer components {
    [data-webtui-theme='terminaldotshop'] {
        [is-~='badge'] {
            &[variant-='brand'] {
                --badge-color: var(--brand);
                --badge-text: var(--accent);
            }

            &[variant-='artisan'] {
                --badge-color: var(--artisan);
                --badge-text: var(--accent);
            }

            &[variant-='object-object'] {
                --badge-color: var(--object-object);
                --badge-text: var(--accent);
            }

            &[variant-='segfault'] {
                --badge-color: var(--segfault);
                --badge-text: var(--accent);
            }

            &[variant-='dark-mode'] {
                --badge-color: var(--dark-mode);
                --badge-text: var(--accent);
            }

            &[variant-='404'] {
                --badge-color: var(--404);
                --badge-text: var(--accent);
            }

            &[variant-='cron'] {
                --badge-color: var(--cron);
                --badge-text: var(--background0);
            }
        }
    }
}
